import { Button, Modal, Table } from 'antd'
import { http } from '@/utils'
import { useEffect, useState, useImperativeHandle } from 'react'

const Listorderuesrmodal = (props) => {
  const configModalOpenOk = () => {
    setShowModalOpen(false)
  }
  const configModalOpenCancel = () => {
    setShowModalOpen(false)
  }
  const [showModalOpen, setShowModalOpen] = useState(false)
  const [configRow, setConfigRow] = useState({})
  const [orderUserList, setOrderUserList] = useState([])
  const [accountTypeOpt, setAccountTypeOpt] = useState([])
  const [dictObj, setDictObj] = useState([])

  // 父组件调用打开模态框
  useImperativeHandle(props.onRef, () => {
    return {
      openModalOpen: openModalOpen,
    }
  })
  const openModalOpen = (data) => {
    console.log(data)
    setConfigRow({ ...data })
    setShowModalOpen(true)
  }


  useEffect(() => {
    const getList = async () => {
      const res = await http.post('/alarm/deliversign/listTbTradeUser', {
        userId: configRow.userId
      })
      const list = res.body.map((item, i) => {
        const row = accountTypeOpt.filter(citem => +citem.value === item.accountType)
        const accountTypeName = row.length ? row[0].label : '-'
        return {
          ...item,
          accountTypeName: accountTypeName,
          tranType: item.supportEmpty ? '期货' : '股票',
          '_id': i
        }
      })
      console.log('交易账号列表-', list)
      setOrderUserList(list)
    }
    const getDicfig = async () => {
      const res = await http.post('/alarm/deliversign/getDicConfig', { dictIds: [1000, 1001, 1002, 1003, 1004, 1005, 1006] })
      setAccountTypeOpt(res.body['1004'].map(item => ({ label: item.dictName, value: item.dictCode })))
      setDictObj(res.body)
      console.log('字典-', res.body)
    }
    if (showModalOpen) {
      if (dictObj[1000]) {
        getList()
      } else {
        getDicfig()
      }
    }
  }, [showModalOpen, configRow, dictObj, accountTypeOpt])
  const columns = [
    { title: '账号类型', dataIndex: 'accountTypeName' },
    { title: '用户名/标识', dataIndex: 'account' },
    { title: '密码/密钥', dataIndex: 'password' },
    { title: '最大下单份数', dataIndex: 'maxSize' },
    // { title: '交易类型', dataIndex: 'tranType' },
  ]
  return (
    <>
      <Modal
        title={`交易账号列表（${configRow.username}）`}
        open={showModalOpen}
        onOk={configModalOpenOk}
        onCancel={configModalOpenCancel}
        width={700}
        footer={[
          <Button key="submit" type="primary" onClick={configModalOpenCancel}>
            关闭
          </Button>
        ]}
      >
        <Table
          size="small"
          rowKey="_id"
          dataSource={orderUserList}
          pagination={false}
          columns={columns}
          bordered
        />
      </Modal>
    </>
  )
}
export default Listorderuesrmodal
